<!DOCTYPE html>
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path ;

%>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="IMG/favicon.ico">


  <title>规则配置</title>

  <!-- Bootstrap core CSS -->
  <link href="static/css/dist/css/bootstrap.min.css?v=1" rel="stylesheet">
  <!-- Bootstrap theme -->
  <link href="static/css/dist/css/bootstrap-theme.min.css" rel="stylesheet">
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href="static/css/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="static/css/theme.css" rel="stylesheet">

  <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
  <script>

    function loadAddModel(){
      //加载页面初始化
      document.getElementById("dataName").value="";
      document.getElementById("dataURL").value="";
      document.getElementById("dataLoginName").value="";
      document.getElementById("dataPassword").value="";

      document.addData.addDateButton.disabled=true;
      document.getElementById("checkAddDateButton").innerHTML="检测";
    }
    function resetAdd(dataSourceId){
      document.getElementById("addTableName").value="";
      document.addTable.addButton.disabled=true;
      document.getElementById("checkButton").innerHTML="检测";
      document.getElementById("dataSourceId").value=dataSourceId;
    }
    function loadDatabaseTable(){
      var tabelName = document.getElementById("");
      tabelName = window.encode
      document.location.href = "<%= basePath %>/iniRuleTable?databaseName=" + tabelName;
    }

  </script>
  <!--[if lt IE 9]><script src="static/css/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
  <script src="static/css/assets/js/ie-emulation-modes-warning.js"></script>

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>

  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>



  <![endif]-->
</head>

<body role="document">


<!-- Fixed navbar -->
<jsp:include page="top.jsp" flush="true"/>

<div class="container">

  <div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">
      <span style="font-family:微软雅黑;">
      数据源配置
          <!--
        <button type="button" id="loadButton" name="loadButton"  data-toggle="modal" data-target="#addModal" onClick="loadAddModel()" class="btn btn-default" >
          新增
        </button>
        -->
          <span style="color:red">${msg}</span>
      </span>
    </div>
    <div class="panel-body">
      <p><span style="font-family:微软雅黑;">此页面配置你的数据库用到的表名。</span> </p>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">表详情</h4>
          </div>
          <div class="modal-body" style="font-family:微软雅黑;">
            <form action="<%= basePath %>/ruleTableAdd" method="post" name="addTable">

              <div class="row">
                <div class="col-lg-12">
                  <div class="input-group">
                    <input type="text" name="addTableName" id="addTableName" class="form-control" placeholder="ADD TABLE NAME....">
                      <span class="input-group-btn">
                        <input type="submit" id="addButton" name="addButton" class="btn btn-default" value="ADD" disabled>
                      </span>
                      <span class="input-group-btn">
                        <button type="button" id="checkButton" name="checkButton" onClick="checkAddTable()" class="btn btn-primary" >
                          检测
                        </button>
                      </span>
                      <span id="tableAdd"></span>
                      <input type="hidden" id="dataSourceId" name="dataSourceId" value=""/>
                  </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
              </div>

            </form>
          </div>

        </div>
      </div>
    </div>

    <!--Model ALL-->
    <!-- Modal -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="addModalLabel">添加数据源</h4>
          </div>
          <div class="modal-body" style="font-family:微软雅黑;">
            <form class="form-horizontal" action="<%= basePath %>/ruleDataAdd" method="post" name="addData">
              <div class="form-group">
                <label for="dataName" class="col-sm-2 control-label">数据源名</label>
                <div class="col-sm-10">
                  <input name="dataName" type="text" class="form-control" id="dataName" placeholder="DATANAME">
                </div>
              </div>

              <div class="form-group">
                <label for="dataURL" class="col-sm-2 control-label">URL</label>
                <div class="col-sm-10">
                  <input name="dataURL" type="text" class="form-control" id="dataURL" placeholder="URL">
                </div>
              </div>
              <div class="form-group">
                <label for="dataLoginName" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                  <input name="dataLoginName" type="text" class="form-control" id="dataLoginName" placeholder="USERNAME">
                </div>
              </div>
              <div class="form-group">
                <label for="dataPassword" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input name="dataPassword" type="password" class="form-control" id="dataPassword" placeholder="Password">
                </div>
              </div>
              <div class="form-group" align="right">
                <span id="dataAdd"></span>
                <button type="submit" id="addDateButton" name="addDateButton" class="btn btn-default"  disabled>添加</button>
                <button type="button" id="checkAddDateButton" name="checkAddDateButton" onClick="checkAddData()" class="btn btn-primary" >
                  检测
                </button>

                &nbsp;&nbsp;&nbsp;
              </div>
            </form>

          </div>

        </div>
      </div>
    </div>
    <!-- Table -->
    <table class="table" style="font-family:微软雅黑;">
      <tr>

        <th>序号</th>
        <th>数据源名</th>
        <!--<th>URL</th>
        <th>账号</th>
        <th>密码</th>
        <th>创建人</th>-->
        <th>配置表名</th>
        <%--<th>操作</th>--%>

      </tr>
      <c:forEach items="${ruleMap}" var="map">
      <tr>

        <td>${map.value[0]}</td>
        <td>${map.value[1]}</td>
        <!--<td>${map.value[2]}</td>
        <td>${map.value[4]}</td>
        <td>********</td>
        <td>${map.value[3].userRealname}</td>-->
        <td><a href="javascript:void(0)"  data-toggle="modal" data-target="#myModal" onclick="resetAdd('${map.value[5]}')">添加</a>|<a href="<%= basePath %>/iniRuleTable?dataId=${map.value[5]}">查看</a></td>
        <%--<th><a href="<%= basePath %>/ruleIntoPage?dataId=${map.value[5]}&method=delete" onclick="resetAdd()">删除</a></th>--%>

      </tr>
      </c:forEach>

    </table>
  </div>

</div> <!-- /container -->



<jsp:include page="bottom.jsp" flush="true"/>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

<script src="static/js/jquery.min.js"></script>
<script src="static/css/dist/js/bootstrap.min.js"></script>
<script src="static/css/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="static/css/assets/js/ie10-viewport-bug-workaround.js"></script>
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-->
<script>
    //测试检测数据源表是否可连接
    function checkAddTable(){
        var obj={};
        obj["dataSourceId"]=document.getElementById("dataSourceId").value;
        obj["addTableName"]=document.getElementById("addTableName").value;
        document.getElementById("tableAdd").innerHTML="";
        $.ajax({
            url: "checkDsTableIsExist",
            type: "POST",
            contentType: 'application/json;charset=utf-8', //设置请求头信息
            dataType: "json",
            //data: JSON.stringify(customerArray),    //将Json对象序列化成Json字符串，JSON.stringify()原生态方法
            data: JSON.stringify(obj),            //将Json对象序列化成Json字符串，toJSON()需要引用jquery.json.min.js
            success: function (data) {
                if(data.status=="success"){
                    document.addTable.addButton.disabled=false;
                    document.getElementById("checkButton").innerHTML=data.info;
                    document.getElementById("tableAdd").innerHTML="";
                }else{
                    document.getElementById("tableAdd").innerHTML=data.info;
                }
            },
            error: function (res) {
                alert(res.responseText);
            }
        });
    }
    //测试数据源是否可连接
//    function checkAddData(){
//        document.addData.addDateButton.disabled=false;
//        document.getElementById("checkAddDateButton").innerHTML="成功";
//    }
    function checkAddData() {
        var obj={};
        obj["dataName"]=document.getElementById("dataName").value;
        obj["dataURL"]=document.getElementById("dataURL").value;
        obj["dataLoginName"]=document.getElementById("dataLoginName").value;
        obj["dataPassword"]=document.getElementById("dataPassword").value;
        document.getElementById("dataAdd").innerHTML="";
        $.ajax({
            url: "checkDsIsExist",
            type: "POST",
            contentType: 'application/json;charset=utf-8', //设置请求头信息
            dataType: "json",
            //data: JSON.stringify(customerArray),    //将Json对象序列化成Json字符串，JSON.stringify()原生态方法
            data: JSON.stringify(obj),            //将Json对象序列化成Json字符串，toJSON()需要引用jquery.json.min.js
            success: function (data) {
                if(data.status=="success"){
                    document.addData.addDateButton.disabled=false;
                    document.getElementById("checkAddDateButton").innerHTML=data.info;
                    document.getElementById("dataAdd").innerHTML="";
                }else{
                    document.getElementById("dataAdd").innerHTML=data.info;
                }

            },
            error: function (res) {
                alert(res.responseText);
            }
        });

    }
</script>
</body>
</html>
